<template>
    <div class="Kehu-Page">
      <div class="panel-body">
        <input class="form-control" v-model="search" style="width: 400px;float:left" placeholder="搜索客户名">
        <el-button type="primary" style="float: right">添加商品<i class="el-icon-upload el-icon--right"></i></el-button>
      </div>
      <el-table :data="ShopList">
        <el-table-column prop="id" label="客户编号"/>
        <el-table-column prop="name" label="客户姓名"/>
        <el-table-column prop="address" label="客户地址"/>
        <el-table-column prop="phone" label="客户电话"/>
        <el-table-column prop="wx" label="客户微信"/>
        <!--<el-table-column label="查看">-->
          <!--<template scope="scope">-->
            <!--<router-link :to="'/'+scope.row.id" style="color: #177676">客户详情</router-link>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
    </div>
</template>

<script>
  export default {
    name: 'Kehu-Page',
    data(){
      return {
        search:'',
        kehus:[]
      }
    },
    computed:{
      ShopList(){
        return this.kehus.filter(kehu=>{
          return kehu.name.indexOf(this.search)!=-1
        });
      }
    },
    mounted() {
      this.$http.get('/kehu').then(resp=>{
        this.kehus = resp.data;
      }).catch(err=>console.log(err));
    }
  }
</script>
<style lang="less">
    .Zy-Page {
      background-color: #3ff7ff;width: 100%;
    }
</style>
